<template>
    <!-- html结构 -->
    <div class="person">
        <h1>情况一：监视【ref】定义【基本类型】数据</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点击+1</button>

    </div>
</template>
<script setup lang="ts" name="Person">

import { computed, ref, watch } from 'vue';
    let sum=ref(0);
    function changeSum() {
        sum.value++;
    }
    // 情况一：监视【ref】定义【基本类型】数据
    const timer= watch(sum,(newValue,oldValue)=>{
        console.log('sum被修改了',newValue,oldValue);
        if(newValue>10){
            // 回调关闭监听
            timer();
        }
    })

</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>